<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .row {
            width: 400px;
            height: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f3f3f3;
            margin: 0px 0px 20px 45px;
            border-radius: 8px;
        }
        .box{
            display: flex;
            justify-content: space-around;
            align-items: center;    
        }
        .bigBox {
            background-color: black;
            color:#ffffff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor:pointer;
            width:40px;
            height:19px;
            border-radius: 40%;
            text-align:center;
        }
        button{
            background-color: black;
            color:#ffffff;
            width: 20px;
            border-radius: 50%;
            border: none;
            outline: none;
        }
    </style>
</head>
<body>
    <div id="app">
    </div>
    <script>
        let App = {
            template: `
        <div class="menu" :style="styles"">
            <div v-for="(item ,index) in list" class="row" :style="{}">
                <p>{{item.name}}</p>
                <div class='box'>
                    <p :style="{marginRight: '20px'}">¥：{{item.price}}</p>
                    <div class='bigBox'>
                    <button v-on:click="subtract(item)">-</button>
                    <p>{{item.count}}</p>
                    <button v-on:click="add(item)">+</button>
                    </div>
                </div>
            </div>
            <p :style="{textAlign:'right'}" >总价格:{{price}}</p>
        </div>
    `,
            data() {
                return {
                    count:1,
                    list: [
                        { name: '香蕉', price: 10, count: 1 },
                        { name: '苹果', price: 20, count: 3 },
                        { name: '葡萄', price: 30, count: 1 },
                        { name: '榴莲', price: 50, count: 1 },
                        { name: '西瓜', price: 20, count: 1 },
                    ],
                    styles: {
                        width: '500px',
                        height: '500px',
                        borderRadius: '5px',
                        boxShadow: '0px 0px 0px 4px #f3f3f3',
                        margin: 'auto',
                    }
                }
            }, 
                    methods:{
                        add:function(item){
                            if(item.count ==4 ){
                                item.count = 4
                            }else{
                                item.count ++;
                            }
                            return item.count
                        },
                        subtract:function(item){
                            if(item.count <=1 ){
                                item.count = 1
                            }else{
                                item.count --;
                            }
                            return item.count
                        }
                    },
                    computed:{
                        price() {
                            let sum = 0;
                            this.list.forEach((item)=> {
                               sum+=item.count*item.price
                            })
                            return sum
                        }

                    }
        }
        new Vue({
            render: h => h(App)
        }).$mount("#app")
    </script>
</body>
</html>